<template>
  <client-only>
    <div class="main">
      <div class="title">
        <a class="active" href="/login">登录</a>
        <span>·</span>
        <a href="/register">注册</a>
      </div>

      <div class="sign-up-container">
        <el-form :model="user" :rules="rules" ref="userForm">
          <el-form-item class="input-prepend restyle" prop="mobile">
            <div>
              <el-input
                type="text"
                placeholder="手机号"
                v-model="user.mobile"
              />
              <i class="iconfont icon-phone" />
            </div>
          </el-form-item>

          <el-form-item class="input-prepend" prop="password">
            <div>
              <el-input
                type="password"
                placeholder="密码"
                v-model="user.password"
              />
              <i class="iconfont icon-password" />
            </div>
          </el-form-item>

          <div class="btn">
            <input
              type="button"
              class="sign-in-button"
              value="登录"
              @click="submitForm"
            />
          </div>
        </el-form>
        <!-- 更多登录方式 -->
        <div class="more-sign">
          <h6>社交帐号登录</h6>
          <ul>
            <li>
              <a id="weixin" class="weixin" target="_blank" href="javascript:;"
                ><i class="iconfont icon-weixin"
              /></a>
            </li>
            <li>
              <a id="qq" class="qq" target="_blank" href="javascript:;"
                ><i class="iconfont icon-qq"
              /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </client-only>
</template>
  
  <script>
import "~/assets/css/sign.css";
import "~/assets/css/iconfont.css";
import cookie from "js-cookie";
import memberApi from "/api/member";

export default {
  layout: "sign",
  data() {
    //   手机号自定义验证规则
    var validateMobile = (rule, value, callback) => {
      if (/^1[3456789]\d{9}$/.test(value)) {
        //   验证通过
        callback();
      } else {
        callback(new Error("请输入正确的手机号码"));
      }
    };
    return {
      user: {
        mobile: "",
        password: "",
      },
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validateMobile, trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          // 验证通过,提交登录表单
          memberApi
            .login(this.user)
            .then((res) => {
              //   提示登录成功，获取token信息，将token进行本地存储，方便下次访问api使用
              cookie.set("member_token", res.data.token);
            })
            .then(() => {
              // 获取当前用户信息
              memberApi.getInfo().then((res) => {
                // console.log(res.data);
                // 将用户信息存储到cookie中，转换为字符串
                let userInfo = JSON.stringify(res.data);
                cookie.set("member_info", userInfo);
                // 跳转至首页面
                this.$router.push("/");
              });
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          //   失败
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
  <style>
.el-form-item__error {
  z-index: 9999999;
}
</style>